 <template>
  <div class="encrypted">
    <div class="header">
      <top-bar :barObj="barObj"/>
      <!-- 关闭密保卡界面时提示“请确认是否已经截图保存？”“去保存/已保存，关闭”（进行中）
      -->
    </div>
    <img class="imgContent" :src="Content" alt>

    <!-- <div class="EncryptedVerify" v-if="isEncryptedVerify">
      <div class="main">
        <div class="title">
          <div class="iconfont icon-guanbi"></div>密保卡验证
        </div>
        <div class="content">
          <div class="item">
            <div class="box">A1</div>
            <div class="box boxInput">
              <input type="text">
            </div>
          </div>
          <div class="item">
            <div class="box">E3</div>
            <div class="box boxInput">
              <input type="text">
            </div>
          </div>
          <div class="item">
            <div class="box">B4</div>
            <div class="box boxInput">
              <input type="text">
            </div>
          </div>
        </div>
        <div class="sureBtn">确定</div>
      </div>
    </div>-->
  </div>
</template>
 <script>
import { payPassCard } from "../../api";
import { getGuid } from "../../utils/index";
import $ from "jquery";
import topBar from "@/components/topBar";

export default {
  name: "encrypted",
  data() {
    return {
      barObj: {
        isBack: true,
        backVal: "返回",
        title: "密保卡",
        isIcon: true
      },
      isEncryptedInquire: false,
      isEncryptedVerify: false,
      // mbUrl: "http://47.92.5.116:8078",
      mbUrl: "https://shield.912cc.com",
      Content: "",
      account: JSON.parse(localStorage.zyUserInfo).username
    };
  },
  components: {
    topBar
  },
  mounted() {
    this.SecurityCardGet();
  },
  methods: {
    //获取密保卡
    SecurityCardGet() {
      let _this = this;
      let userid = localStorage.zyUserId;
      const username = JSON.parse(localStorage.zyUserInfo).username;
      let url = `${this.mbUrl}/api/SecurityCard/SecurityCardGet?account=${
        this.account
      }&userid=${userid}`;

      $.ajax({
        type: "POST",
        url: url,
        headers: {
          "Content-type": "application/x-www-form-urlencoded",
          account: username,
          loginmachine: getGuid(),
          auth: localStorage.zyAuth
        },
        success: function(result) {
          _this.Content = `data:image/png;base64,${result.Content}`;
        },
        error: function() {
          _this.SecurityCardGenerate();
        }
      });
    },

    //SecurityCardGenerate 生成密保卡
    SecurityCardGenerate() {
      let _this = this;
      let userid = localStorage.zyUserId;
      const username = JSON.parse(localStorage.zyUserInfo).username;

      let url = `${this.mbUrl}/api/SecurityCard/SecurityCardGenerate?account=${
        this.account
      }&userid=${userid}`;
      $.ajax({
        type: "POST",
        url: url,
        headers: {
          "Content-type": "application/x-www-form-urlencoded",
          account: username,
          loginmachine: getGuid(),
          auth: this.auth
        },
        success: function(result) {
          _this.SecurityCardGet();
        },
        error: function() {
          Toast({
            message: "生成失败",
            duration: 2000
          });
        }
      });
    },

    //是否启用密保卡
    // api / SecurityCard / SecurityCardEnable？userid = {userid}
    securityCard(token) {
      let id = localStorage.zyUserId;
      const username = JSON.parse(localStorage.zyUserInfo).username;
      let url = `${
        this.mbUrl
      }/api/SecurityCard/SecurityCardEnable?userid=${id}`;

      $.ajax({
        type: "POST",
        url: url,
        headers: {
          "Content-type": "application/x-www-form-urlencoded",
          account: username,
          loginmachine: getGuid(),
          auth: token
        },
        success: function(result) {
          this.IsScuess = result.IsScuess;
          console.log(result);
          console.log(this.IsScuess);
        }
      });
    }
  }
};
</script>
<style lang="stylus" scoped>
.encrypted {
  width: 100%;
  height: 100%;
  background: #000103;
  padding-top: 0.5rem;
  box-sizing: border-box;

  .header {
    margin-bottom: 0.8rem;
  }

  .imgContent {
    width: 7.04rem;
    height: 10.4rem;
    display: block;
    margin: 0 auto;
  }

  .encryptedInquire, .EncryptedVerify {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    position: fixed;
    left: 0;
    top: 0;
    z-index: 99;

    .main {
      width: 7.04rem;
      height: 6.94rem;
      background: #FFF;
      border-radius: 0.2rem;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      text-align: center;

      .title {
        .iconfont {
          position: absolute;
          left: 15px;
          font-size: 20px;
        }

        width: 6.63rem;
        height: 1rem;
        line-height: 1rem;
        font-size: 16px;
        border-bottom: 1px solid #898989;
        margin: 0 auto;
      }

      .content {
        width: 85%;
        height: 2rem;
        margin: 1rem auto 1.2rem auto;
        display: flex;
        justify-content: space-around;

        .item {
          width: 0.95rem;
          height: 2rem;
          display: flex;
          flex-direction: column;

          .box {
            flex: 1;
          }

          .boxInput {
            input {
              width: 100%;
              height: 100%;
              background: #D7D7D7;
            }
          }
        }
      }

      p {
        width: 80%;
        color: #898989;
        margin: 1rem auto;
        line-height: 20px;
      }

      .inputBox {
        display: flex;
        width: 90%;
        height: 0.6rem;
        line-height: 0.6rem;
        margin: 0 auto 0.8rem auto;
        font-size: 15px;
        text-align: center;

        input {
          width: 3rem;
          background: #D7D7D7;
          border-radius: 5px;
          margin: 0 5px;
        }

        .btnBtn {
          width: 2rem;
          background: #FF642C;
          color: #fff;
          border-radius: 0.06rem;
        }
      }

      .sureBtn {
        width: 6.18rem;
        height: 1rem;
        line-height: 1rem;
        background: linear-gradient(-42deg, rgba(249, 71, 1, 1), rgba(250, 81, 5, 1), rgba(253, 110, 17, 1));
        box-shadow: 0px 3px 9px 0px rgba(91, 24, 0, 0.47);
        border-radius: 0.1rem;
        color: #FFF;
        margin: 0.4rem auto;
        font-size: 20px;
      }
    }
  }
}
</style>

 